<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maxinum-scale=1,user-scalable=no">
    <title>16按钮和折叠插件 </title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <style>
        a:focus{
            outline: none;
        }
    </style>
</head>

<body style="margin:200px;">

    <!-- 在火狐多次页面加载时候按钮可能保持表单的禁用或喧杂状态 解决方法是autocomplete="off" -->
   <button class="btn btn-primary" data-toggle="button" autocomplete="off">单个切换</button>

   <!-- 单选按钮 -->
   <div class="btn-group" data-toggle="buttons">
       <label for="" class="btn btn-primary active">
           <input type="radio" name="sex" value="男" checked>男
       </label>
       <label for="" class="btn btn-primary">
            <input type="radio" name="sex" value="女">女
        </label>
   </div>

   <br/><br/><br/><br/><br/>
   <!-- 多选按钮 -->
   <div class="btn-group" data-toggle="buttons">
       <label for="" class="btn btn-primary active">
           <input type="checkbox" name="fa" value="体育" checked>体育
       </label>
       <label for="" class="btn btn-primary">
           <input type="checkbox" name="fa" value="英语">英语
       </label>
       <label for="" class="btn btn-primary">
           <input type="checkbox" name="fa" value="语文">语文
       </label>
       <label for="" class="btn btn-primary">
           <input type="checkbox" name="fa" value="跑步">跑步
       </label>
   </div>

   <br/><br/><br/><br/><br/><br/>
   <button class="btn btn-primary" data-loading-text="loading...." autocomplete="off">开始上传</button>

   <button id="em" class="btn btn-primary" autocomplete="off">按钮</button>

   <br/><br/><br/><br/>
   <!-- 折叠插件  通过点击折叠内容  要指明折叠的目标  -->
   <button class="btn btn-primary" data-toggle="collapse" data-target="#content">Bootstrap</button>
   <div class="collapse" id="content">
       <div class="well">胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅胡一天也很帅</div>
   </div>
   
   

    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
    <script type="text/javascript">
        
        // $('button').on('click',function(){
        //     var btn = $(this).button('loading');
        //     setTimeout(function() {
        //         btn.button('reset');    // 设置一秒后就恢复到重置
        //     }, 1000);
        // })
       
       $('#em').on('click',function(){
           $(this).button('toggle');
       })

       // 折叠插件  通过点击折叠内容



     </script>
</body>
</html>